<template lang="">
  <div>
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-form @submit="onLoginClick">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="username"
          name="loginname"
          placeholder="请输入用户名"
          :rules="[
            {
              pattern: /^[a-zA-Z]\w{4,}$/,
              message: '用户只能以数字开头，以数字字母下滑线组件，至少5位'
            }
          ]"
        />
        <van-field
          type="password"
          v-model="password"
          name="password"
          placeholder="请输入密码"
          :rules="[{ pattern: /^\S{5,}$/, message: '至少5位' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 注册 </van-button>
      </div>
    </van-form>

    有账号去 <router-link to="/login">登录</router-link>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { reg } from '@/api/user'
import { useRouter } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant'

let router = useRouter()

const username = ref('')
const message = ref('')
const password = ref('')
function onClickLeft() {
  router.back()
}
function onLoginClick(values: object) {
  reg(values).then((r) => {
    if (r.data.code == 200) {
      showSuccessToast(r.data.message)

      router.push('/login')
    } else {
      showFailToast(r.data.message)
    }
  })
}
</script>
<style lang="css" scoped>
.van-form {
  margin-top: 20vh;
}
</style>
